<template>
  <div>
    <el-carousel :interval="5000" height="400px"  @change="changeImg" indicator-position="outside">
      <el-carousel-item v-for="(item,index) in images" :key="index">
        <el-image style="width:60%; height:80%" :src="item.idView" fit="fit"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { id: 0, idView: require('@/assets/lun1.jpg') },
        { id: 1, idView: require('@/assets/lun2.jpg') },
        { id: 2, idView: require('@/assets/lun3.jpg') },
// 更多图片
      ],
      className: "",
    };
  },
  methods: {
    changeImg: function (e) {
// 切换图片时的操作
    }
  }
}
</script>
<style scoped>
lun-img {
  transition: all 4s;
  transform: scale(1.5);
}
lun-img-two {
  transform: scale(1);
}
el-carousel__item.is-animating {
  transition:transform1s ease-in-out;
}
</style>

